<template>
  <div class="e-commerce">
    <b-sidebar id="sidebar-2" right shadow>
      <div class="sidebar-left">
        <!-- 电商模块 -->
        <div class="jd-container">
          <div class="jd-header">
            <a href="javascript:;" class="header-logo">
              <img :src="require('@/assets/images/LifePageImages/LifeImages/neum.png')" class="neum-style">
            </a>
            <span class="header-glass">
              <img :src="require('@/assets/images/LifePageImages/LifeImages/glass.png')" class="glass-style">
            </span>
            <input type="search" class="header-search" placeholder="搜索商品/店铺">
            <a href="javascript:;" class="header-login">登录</a>
          </div>
          <!--图片轮播效果-->
          <b-carousel
            id="top-pic2"
            style="text-shadow:0px 0px 2px #000"
            img-width="100%"
            img-height="100%"
            indicators
            fade>
            <b-carousel-slide
              v-for="(img, index) in lifeECommerceSlideImages"
              :key="index"
              :img-src="img" />
          </b-carousel>
          <div class="jd-nav">
            <ul class="jd-ul-style">
              <li
                class="jd-li-style"
                v-for="(item, index) in lifeECommerceNavItemArr"
                :key="index">
                <a :href="item.href">
                  <img :src="item.image">
                  <p>{{ item.title }}</p>
                </a>
              </li>
            </ul>
            <div class="nav-bg"><img :src="require('@/assets/images/LifePageImages/LifeECommerceImages/nav_img.jpg')" style="width:100%"></div>
          </div>
          <div class="super-day">
            <div class="super-img">
              <a href="javascript:;">
                <img :src="require('@/assets/images/LifePageImages/LifeECommerceImages/superday.jpg')" style="width:100%">
              </a>
            </div>
            <div class="jd-daj">
              <div
                class="area jd-milk"
                v-for="(item, index) in lifeECommerceSuperDayItem"
                :key="index">
                <div class="text">
                  <h3>{{ item.title }}</h3>
                  <p>{{ item.detail }}</p>
                </div>
                <div class="text-img">
                  <a href="javascript:;">
                    <img :src="item.images">
                  </a>
                </div>
              </div>
            </div>
          </div>
          <div class="floor">
            <div class="jd-title">
              <img :src="require('@/assets/images/LifePageImages/LifeECommerceImages/floor-tit.png')">
              <span>
                <img :src="require('@/assets/images/LifePageImages/LifeECommerceImages/left.jpg')">
              </span>
            </div>
            <div class="jd-section">
              <div class="goods-item">
                <div class="good-left">
                  <div class="text">
                    <h3>玩3C</h3>
                    <p>华为P10首发</p>
                    <span class="hot">正在抢购</span>
                  </div>
                  <div class="text-img">
                    <a href="javascript:;">
                      <img :src="require('@/assets/images/LifePageImages/LifeECommerceImages/tel1.jpg')">
                    </a>
                  </div>
                </div>
                <div class="good-right">
                  <div class="text">
                    <h3>京东家电</h3>
                    <p>30天价保</p>
                  </div>
                  <div class="text-img">
                    <a href="javascript:;">
                      <img :src="require('@/assets/images/LifePageImages/LifeECommerceImages/tel2.jpg')">
                    </a>
                  </div>
                </div>
              </div>
              <div class="goods-item">
                <div class="good-left">
                  <div class="text">
                    <h3>京东超市</h3>
                    <p>品质好物1元抢</p>
                  </div>
                  <div class="text-img">
                    <a href="javascript:;">
                      <img :src="require('@/assets/images/LifePageImages/LifeECommerceImages/tel3.jpg')" >
                    </a>
                  </div>
                </div>
                <div class="good-right">
                  <div class="text">
                    <h3>爱家</h3>
                    <p>置物架3件88折</p>
                    <span class="hot">精致厨房必备</span>
                  </div>
                  <div class="text-img">
                    <a href="javascript:;">
                      <img :src="require('@/assets/images/LifePageImages/LifeECommerceImages/tel4.jpg')">
                    </a>
                  </div>
                </div>
              </div>
              <ul class="jd-prod">
                <li
                  class="jd-prod-li"
                  v-for="(item, index) in lifeEcommerceProductInformation"
                  :key="index">
                  <LifeECommerceProductItem :product-information="item" />
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </b-sidebar>
  </div>
</template>

<script>
import LifeECommerceProductItem from './LifeECommerceProductItem'
import {
  lifeECommerceSlideImages,
  lifeECommerceNavItemArr,
  lifeEcommerceProductInformation,
  lifeECommerceSuperDayItem
} from './index'

export default {
  name: 'LifeECommerce',
  components: {
    LifeECommerceProductItem
  },
  data () {
    return {
      lifeECommerceSlideImages,
      lifeECommerceNavItemArr,
      lifeEcommerceProductInformation,
      lifeECommerceSuperDayItem
    }
  }
}
</script>

<style scoped>
  .header-address a {
    display: block;
    padding: 20px 25px 0;
    font-size: 1.2rem;
    font-weight: 400;
    color: #fff;
    background-image: linear-gradient(90deg,#0af,#0085ff);
  }
  .header-search {
    padding: .1rem 30px .4rem;
    background-image: linear-gradient(90deg,#0af,#0085ff);
  }
  .b-sidebar {
    width: auto !important;
  }
  ul {
    list-style-type: none;
  }
  .jd-container {
    width: 100%;
  }
  .jd-header {
    box-sizing: border-box;
    position: fixed;
    height: 45px;
    width: 100%;
    padding-left: 60px;
    padding-right: 60px;
    overflow: hidden;
    z-index: 50;
  }
  .jd-header .header-logo {
    position:absolute;
    left:18px;
    top:14px;
    width:25px;
    height:35px;
    background-size:25px 19px;
  }
  .jd-header .header-search {
    box-sizing: border-box;
    padding-left: 10px;
    width:100%;
    height:37px;
    margin-top:4px;
    border-radius:4px;
    background: rgba(255,255,255,0.9);
    font-size:14px;
    color:#999;
  }
  .jd-header .header-glass {
    display: inline-block;
    position: absolute;
    right:66px;
    top:15px;
    width:20px;
    height:20px;
    background-size:16px 16px;
  }
  .jd-header .header-login {
    position:absolute;
    right:18px;
    top:15px;
    font-size: 12px;
    color:#fff;
  }
  .glass-style {
    width: 100%;
    height: 100%;
    margin-top: -15px;
  }
  .neum-style {
    width: 100%;
    margin-top: -10px;
  }
  .jd-nav {
    width:100%;
    border:1px solid #eee;
    padding-bottom: 15px;
    position: relative;
  }
  .jd-nav ul {
    width:100%;
    padding-bottom: 15px;
  }
  .jd-nav ul li {
    float: left;
    width:20%;
    padding-top:16px;
  }
  .jd-nav ul li a {
    display: block;
    width:100%;
  }
  .jd-nav ul li a img {
    margin:0 auto;
    width:60%;
    display: block;
  }
  .jd-ul-style {
    list-style-type: none;
    padding: 0;
  }
  .jd-li-style {
    font-size: 0.5rem;
  }
  .jd-nav ul li a p {
    color:#666;
    text-align: center;
    padding-top:6px;
  }
  .nav-bg {
    position: absolute;
    top:0;
    left: 0;
    width:100%;
    min-height: 179px;
    z-index: -3;
  }
  .nav-bg img {
    min-height: 178px;
  }
  .super-day,.super-img,.jd-daj {
    width:100%;
    padding-bottom: 5px;
  }
  .super-img a {
    display: block;
    width:100%;
  }
  .jd-daj,.jd-daj {
    font-size: 0
  }
  .jd-daj div.area {
    display: inline-block;
    width:50%;
  }
  .text {
    float: left;
    padding-left: 6px;
    box-sizing: border-box;
    width:55%;
  }
  .text h3 {
    font-size: 16px;
    line-height: 22px;
    font-weight: bold;
  }
  .text p {
    color:#686868;
    font-size: 11px;
    line-height: 15px;
    margin-top: 3px;
  }
  .text-img {
    float: left;
    width:45%;
  }
  .text-img a {
    display: block;
    width:100%;
  }
  .text-img a img {
    display: inline-block;
    width:100%;
    height:100%;
    vertical-align: top;
  }
  .floor,.jd-section,.goods-item {
    width:100%;
    position: relative;
  }
  .goods-item .good-left {
    box-sizing: border-box;
    float: left;
    width:50%;
    padding:5px 0 6.5px 0;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    border-right: 1px solid rgba(0,0,0,0.1);
  }
  .goods-item .good-right {
    box-sizing: border-box;
    float: right;
    width:50%;
    padding:5px 0 10px 0;
    border-bottom: 1px solid rgba(0,0,0,0.1);
  }
  .hot {
    display: inline-block;
    margin-top: 3px;
    font-size: 11px;
    background: #ff4a7d;
    padding:2px;
    color:#fff;
  }
  .jd-prod {
    padding: 0;
  }
  .jd-prod li {
    float: left;
    width:25%;
    padding: 7px 7px 5px;
  }
  .jd-prod-li {
    margin-top: 8px;
  }
  .jd-slide {
    width: 100%;
    padding:8px 8px 0 8px;
    box-sizing: border-box;
  }
  .jd-slide .jd-slide-box {
    width:100%;
    position: relative;
  }
  .jd-slide-leng {
    width: 200%
  }
  .jd-slide-leng li {
    float: left;
    width:50%;
    height:84px;
  }
  .jd-slide-leng li a {
    display: block;
    width: 100%;
    height: 100%;
  }
  .jd-slide-leng li a img {
    width:100%;
    padding:0;
  }
  .slide-index {
    position: absolute;
    bottom: 20px;
    left:50%;
    font-size: 0;
    margin-left: -14px;
  }
  .slide-index span {
    display: inline-block;
    width:6px;
    height:6px;
    border-radius: 50%;
    border:1px solid #fff;
    margin-left: 6px;
  }
  .slide-index span.active {
    background: #fff;
  }
  .jd-title {
    width:100%;
    position: relative;
  }
  .jd-title > img {
    width:100%;
  }
  .jd-title span {
    position: absolute;
    top:7px;
    left:0px;
    height:70%;
    display: block;
    width:100%;
    z-index: 2;
    text-align: center;
  }
  .jd-title span img {
    max-height: 100%;
  }
</style>
